import { Grid, Toast } from 'antd-mobile';
import { PhoneFill } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import { IProduct } from '@/utils/type';
import { useGoTo } from '@/hooks';
import { ROUTE_KEY } from '@/routes/menu';
import style from './index.module.less';

interface IProps {
  data: IProduct;
}

/**
 * 购买课程工具bar
 * @constructor
 */
const BuyBottom = ({ data }: IProps) => {
  const nav = useNavigate();
  const { go } = useGoTo();
  const goToBuy = (id: string) => {
    // 判断本地是否有token，没有则跳转到登录页面

    const token = localStorage.getItem('Student');
    if (!token) {
      Toast.show({
        content: '您还未登录，请先登录',
        position: 'top',
      });
      nav('/login');
      return;
    }
    // 有token则跳转到购买页面
    go(ROUTE_KEY.BUY, { id });
  };
  return (
    <div className={style.container}>
      <Grid columns={24}>
        <Grid.Item span={9} className={style.price}>
          <span className={style.preferentialPrice}>
            ￥
            {data.preferentialPrice}
          </span>
          <span className={style.oldPrice}>
            ￥
            {data.originalPrice}
          </span>
        </Grid.Item>
        <Grid.Item span={6} className={style.phone}>
          <span className={style.point} />
          <span className={style.phoneIcons}>
            <a href={`tel:${data.tel}`}>
              <PhoneFill />
            </a>
          </span>
        </Grid.Item>
        <Grid.Item span={9} className={style.buy}>
          <span onClick={() => goToBuy(data.id as string)}>立即抢购</span>
        </Grid.Item>
      </Grid>
    </div>
  );
};

export default BuyBottom;
